<template>
	<div class="modal-container">
		<el-dialog title="paypal支付设置" width="1000px" custom-class="modal-record " :close-on-click-modal="false"
			:visible.sync="show" :before-close="on_before_close" @closed="on_closed">

			<div class="modal-inner">
				<div class="modal-ctx">
					<div class="input-box flex">
						<div class="label">标题</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.title" placeholder="标题"> </el-input>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">适用环境</div>
						<div class="input-item">
							<el-radio-group v-model="form.mode">
								<el-radio :label="1">正式环境</el-radio>
								<el-radio :label="0">沙盒环境</el-radio>
							</el-radio-group>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">状态</div>
						<div class="input-item">
							<el-radio-group v-model="form.status">
								<el-radio :label="1">开启</el-radio>
								<el-radio :label="0">禁用</el-radio>
							</el-radio-group>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">CURRENCY (货币)</div>
						<div class="input-item">
							<!-- <el-input clearable type="text" v-model="form.currency" placeholder="货币"> </el-input> -->

							<el-select filterable="" v-model="form.currency" placeholder="请选择">
								<el-option v-for="item in currency_options" :key="item.value"
									:label="item.title + '-' + item.value" :value="item.value">
								</el-option>
							</el-select>

						</div>
					</div>
					<div class="input-box flex">
						<div class="label">CLIENTID（应用ID）</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.clientId" placeholder="应用ID"> </el-input>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">CLIENTSECRET（秘钥）</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.clientSecret" placeholder="秘钥"> </el-input>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">CALL BACK (回调地址)</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.acceptUrl" placeholder="回调地址"> </el-input>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">LOCATION URL (跳转地址)</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.locationUrl" placeholder="应用ID"> </el-input>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label"> 货币单位说明：</div>
						<div class="input-item">
							<div class="tip" style="white-space: pre-wrap;">
								<div>1. 美元 (USD)</div>
								<div>2. 欧元 (EUR)</div>
								<div>3. 英镑 (GBP)</div>
								<div>4. 加拿大元 (CAD)</div>
								<div>5. 澳大利亚元 (AUD)</div>
								<div>6. 日元 (JPY)</div>
								<div>7. 瑞士法郎 (CHF)</div>
								<div>8. 中国人民币 (CNY)</div>
								<div>9. 新加坡元 (SGD)</div>
								<div>10. 瑞典克朗 (SEK)</div>
								<div>11. 丹麦克朗 (DKK)</div>
								<div>12. 挪威克朗 (NOK)</div>
								<div>13. 新西兰元 (NZD)</div>
								<div>14. 墨西哥比索 (MXN)</div>
								<div>15. 香港元 (HKD)</div>
								<div>16. 波兰兹罗提 (PLN)</div>
								<div>17. 匈牙利福林 (HUF)</div>
								<div>18. 土耳其里拉 (TRY)</div>
								<div>19. 捷克克朗 (CZK)</div>
								<div>20. 南非兰特 (ZAR)</div>
								<div>21. 印度卢比 (INR)</div>
								<div>22. 马来西亚令吉 (MYR)</div>
								<div>23. 泰国铢 (THB)</div>
								<div>24. 菲律宾比索 (PHP)</div>
								<div>25. 印度尼西亚盾 (IDR)</div>
								<div>26. 韩元 (KRW)</div>
								<div>27. 巴西雷亚尔 (BRL)</div>
								<div>28. 俄罗斯卢布 (RUB)</div>
							</div>
						</div>
					</div>

				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="" @click="show = false">取消</el-button>
				<el-button type="primary" @click="do_submit()">确认</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {
	mapState
} from "vuex";

export default {
	name: "modal-hetong",
	components: {

	},

	data() {
		return {
			show: false,
			info: {},
			form: {
				"id": "",
				"title": "",
				"type": "4",
				"clientId": "",
				"clientSecret": "",
				"acceptUrl": "",
				"locationUrl": "",
				"currency": "",
				"mode": 0,
				"status": 0,
			},

			currency_options: [
				{ value: 'USD', title: '美元 ' },
				{ value: 'EUR', title: '欧元 ' },
				{ value: 'GBP', title: '英镑 ' },
				{ value: 'CAD', title: '加拿大元 ' },
				{ value: 'AUD', title: '澳大利亚元 ' },
				{ value: 'JPY', title: '日元 ' },
				{ value: 'CHF', title: '瑞士法郎 ' },
				{ value: 'CNY', title: '中国人民币 ' },
				{ value: 'SGD', title: '新加坡元 ' },
				{ value: 'SEK', title: '瑞典克朗 ' },
				{ value: 'DKK', title: '丹麦克朗 ' },
				{ value: 'NOK', title: '挪威克朗 ' },
				{ value: 'NZD', title: '新西兰元 ' },
				{ value: 'MXN', title: '墨西哥比索 ' },
				{ value: 'HKD', title: '香港元 ' },
				{ value: 'PLN', title: '波兰兹罗提 ' },
				{ value: 'HUF', title: '匈牙利福林 ' },
				{ value: 'TRY', title: '土耳其里拉 ' },
				{ value: 'CZK', title: '捷克克朗 ' },
				{ value: 'ZAR', title: '南非兰特 ' },
				{ value: 'INR', title: '印度卢比 ' },
				{ value: 'MYR', title: '马来西亚令吉 ' },
				{ value: 'THB', title: '泰国铢 ' },
				{ value: 'PHP', title: '菲律宾比索 ' },
				{ value: 'IDR', title: '印度尼西亚盾 ' },
				{ value: 'KRW', title: '韩元 ' },
				{ value: 'BRL', title: '巴西雷亚尔 ' },
				{ value: 'RUB', title: '俄罗斯卢布 ' },
			]
		};
	},
	computed: {},
	watch: {
		'form.currency'(value) {
			console.log('货币单位', value)
		}
	},
	created() {

	},

	methods: {
		init(row) {
			this.show = true;
			if (row) {
				this.info = row
				this.query_detail()
			}
		},

		query_detail() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "setting_getOnlineInfo",
					id: this.info.id,
				}
			}).then(res => {
				if (res.code == 200) {
					let data = res.data;
					let info = data.info;
					this.form = {
						"id": data.id,
						"title": data.title,
						"type": data.type,
						"clientId": info.clientId,
						"clientSecret": info.clientSecret,
						"acceptUrl": info.acceptUrl,
						"locationUrl": info.locationUrl,
						"currency": info.currency,
						"mode": +info.mode,
						"status": data.status,
					}
				}
			})
		},


		on_before_close() {
			this.show = false;
		},
		on_closed() {
			console.log('on_closed')

			this.form = {
				"id": "",
				"title": "",
				"type": "4",
				"clientId": "",
				"clientSecret": "",
				"acceptUrl": "",
				"locationUrl": "",
				"currency": "",
				"mode": 0,
				"status": 0,
			}
		},
		do_submit() {
			if (!this.form.title) {
				alertErr("请填写标题");
				return;
			}
			if (!this.form.currency) {
				alertErr("请填写货币");
				return;
			}
			if (!this.form.clientId) {
				alertErr("请填写应用ID");
				return;
			}
			if (!this.form.clientSecret) {
				alertErr("请填写秘钥");
				return;
			}
			if (!this.form.acceptUrl) {
				alertErr("请填写回调地址");
				return;
			}
			// if (!this.form.locationUrl) {
			// 	alertErr("请填写跳转地址");
			// 	return;
			// }

			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "setting_saveOnline",
					// id: this.info.id,
					...this.form
				}
			}).then(res => {
				if (res.code == 200) {
					this.$emit('confirm')
					this.show = false
					this.$message({
						message: res.msg,
						type: 'success'
					})
				} else {
					alertErr(res.msg)
				}
			})
		},

		uploadChange(url) {
			this.form.invoiceUrl = url;
		},

		do_row_remove(row, scope) {
			this.rule_list.splice(scope.$index, 1)
		},
		do_row_add() {
			this.rule_list.push({
				"man": '',
				"zeng": '',
			})
		},
	},
};
</script>

<style scoped lang="less">
.upload-plus {
	width: 140px;
}

/deep/ .el-upload {
	display: block;
	width: 200px;
	margin: 0 auto;
	margin: 0;

	.empty {
		.flex-center();
	}
}

/deep/ .modal-record {
	// margin-top: 80px !important;


	.modal-inner {
		padding: 0;
	}

	.el-dialog__header {
		.flex-between();
		border-bottom: 1px solid #eee;
		background: #a98c4d;
		background: #f7f7f7;
		height: 60px;
		line-height: 60px;
		padding: 0 20px;
		font-size: 18px;
		color: #333;

		.el-dialog__title {
			color: #000;
		}

		.el-dialog__headerbtn {

			// top: 0;
			.el-dialog__close {
				color: #000;
				font-size: 20px;
				font-weight: bold;
			}
		}
	}

	.el-dialog__body {
		padding: 0;
	}

	.el-dialog__footer {
		text-align: center;



	}
}

.modal-ctx {
	padding: 30px 50px;
	max-height: 60vh;
	overflow-y: auto;
	border-bottom: 1px solid #ddd;

	.tip {
		margin-bottom: 20px;
		color: #444;
		font-size: 14px;
	}

	.input-box {
		margin-bottom: 15px;
		position: relative;

		&.flex {
			display: flex;
			align-items: flex-start;
			// align-items: center;

			.label {
				margin-bottom: 0;
			}
		}

		.label {
			min-width: 80px;
			min-width: 120px;
			min-width: 180px;
			// margin-right: 20px;
			margin-bottom: 20px;
			font-size: 14px;
			color: #6e7285;
		}

		.input-item {
			flex: 1;
			display: flex;
			align-items: center;


			.el-input {
				width: 220px;
				width: 100%;
			}

			.el-select {
				width: 100%;
			}
		}
	}
}

.upload-ctx {
	margin: 20px 0;
}

.btn-send {}
</style>